<template>
  <div id="app">
    <h1 class="title">请发表对VUE的评论</h1>
    <div class="comment-container">
      <CommentAdd :getUserData="getUserData"></CommentAdd>
      <CommentList :userData="userData" :removeCommentItem="removeCommentItem"></CommentList>
    </div>
    
  </div>
</template>

<script>
import CommentAdd from './components/CommentAdd';
import CommentList from './components/CommentList';

export default {
  name: 'App',
  components: {
    CommentAdd,
    CommentList
  },
  data: function(){
    return{
      // userData:{
      //   username: '',
      //   comment: '',
      // },
      userData: []
    }
  },
  methods: {
    getUserData(sonUserName,sonComment){
      // this.userData.username = sonUserName;
      // this.userData.comment = sonComment;
      this.userData.push({id:Date.now(),username:sonUserName,comment:sonComment})
    },
    removeCommentItem(id){
      console.log('xx',id);
      this.userData.forEach((item,index) => {
        if(item.id == id){
          delete this.userData[index];
        }
      })
    }
  }
}
</script>

<style>
#app {
  color: #2c3e50;
}
.title{
  width: 100vw;
  height: 100px;
  line-height: 100px;
  font-size: 80px;
}
.comment-container{
  display: flex;

}
</style>
